import * as echarts from 'echarts';
import UtilAxios from "@/util/util-axios";
import China from "@/config/data/map/China";

let mapEcharts = null;
let historyList = [];
let timeFn = null;

if (mapEcharts) {
    mapEcharts.dispose(); // 销毁实例，实例销毁后无法再被使用。
}

// 基于准备好的dom，初始化echarts实例
const init = async (el) => {
    // 初始化图表
    mapEcharts = echarts.init(el);

    historyList.push({
        code: "china",
        name: "中国",
    });

    let china = China

    initMap(china, "china", "中国");

    mapEcharts.on("click", (params) => {
        console.log(params)
        // 当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);
        timeFn = setTimeout(function () {
            if (
                allAreaCode.filter((item) => item.name.indexOf(params.name) > -1)[0]
            ) {
                let areaCode = allAreaCode.filter(
                    (item) => item.name.indexOf(params.name) > -1
                )[0].code;
                loadMap(
                    `http://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`
                )
                    .then((data) => {
                        initMap(data, areaCode);
                    })
                    .catch(() => {
                        loadMap(
                            `http://geo.datav.aliyun.com/areas_v3/bound/${areaCode}.json`
                        )
                            .then((res) => {
                                initMap(res, areaCode);
                            })
                            .catch(() => {
                            });
                    });

                historyList.push({
                    code: areaCode,
                    name: params.name,
                });

                let result = [];
                let obj = {};
                for (let i = 0; i < historyList.length; i++) {
                    if (!obj[historyList[i].code]) {
                        result.push(historyList[i]);
                        obj[historyList[i].code] = true;
                    }
                }
                historyList = result;
            }
        }, 250);
    });

    mapEcharts.on("dblclick", (params) => {
        // 当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn);
        if (historyList.length == 1) {
            alert("已经到达最上一级地图了");
            return;
        }
        let map = historyList.pop();
        console.log(historyList[historyList.length - 1])
        if (historyList[historyList.length - 1].code == "china") {
            initMap(china, "china", "中国");
        } else {
            loadMap(
                `http://geo.datav.aliyun.com/areas_v3/bound/${
                    historyList[historyList.length - 1].code
                }_full.json`
            )
                .then((data) => {
                    initMap(data, historyList[historyList.length - 1].code);
                })
                .catch(() => {
                    loadMap(
                        `http://geo.datav.aliyun.com/areas_v3/bound/${
                            historyList[historyList.length - 1].code
                        }.json`
                    )
                        .then((res) => {
                            initMap(res, historyList[historyList.length - 1].code);
                        })
                        .catch(() => {
                        });
                });
        }
    });

    mapEcharts.on("georoam", (params) => {
        let option = mapEcharts.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
            //捕捉到缩放时
            option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
            option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        } else {
            //捕捉到拖曳时
            option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        mapEcharts.setOption(option); //设置option
    });

    // 地图数据请求
    async function loadMap(url) {
        let res = await UtilAxios.get({url})
        console.log(res)
        return res
    }

    // 地图初始化
    function initMap(mapData, mapName) {
        // 注册地图
        echarts.registerMap(mapName, mapData);

        // 配置项
        let options = {
            geo: {
                map: mapName, //地图类型。
                zoom: 1,
                roam: true,
                animation: false,
                itemStyle: {
                    // 区域样式
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 1)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    },
                    shadowColor: "#105781", //地图区域的阴影颜色。
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                },
            },
            series: [
                {
                    name: "map",
                    type: "map", // 地图
                    map: mapName, // 加载注册的地图
                    selectedMode: false, // 不让单独选中
                    roam: true, // 开始鼠标事件，scale缩放、move移动
                    // 图形上的文本标签
                    label: {
                        show: true,
                        color: "#000a3c",
                    },
                    // 地图样式
                    itemStyle: {
                        // 区域样式
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 3,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(223, 231, 242, 1)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(2, 99, 206, 1)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        borderWidth: 1, // 边框大小
                        borderColor: "rgba(104, 152, 190, 1)", // 边框样式
                        shadowColor: "rgba(128, 217, 248, 1)", // 阴影颜色
                        shadowOffsetX: -5, // 阴影水平方向上的偏移距离
                        shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
                        shadowBlur: 10, // 文字块的背景阴影长度
                    },
                    // 选中状态下样式
                    emphasis: {
                        label: {
                            color: "#ffffff",
                        },
                        itemStyle: {
                            areaColor: "#a5d4fe",
                        },
                    },
                },
            ],
        };
        mapEcharts.setOption(options); // 实例配置项与数据
    }
}

const UtilEchartsMap = {
    init
}

export default UtilEchartsMap